<template>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
        text-color="#000000" active-text-color="#FFFFFF">
        <el-menu-item index="1">首页</el-menu-item>
        <el-menu-item index="2">房源信息</el-menu-item>
        <el-menu-item index="3">留言反馈</el-menu-item>
        <el-menu-item index="4">个人中心</el-menu-item>
    </el-menu>
</template>

<script>
export default {
    data() {
        return {
            activeIndex: '4'
        }
    },
    methods: {
        handleSelect(key) {
            switch (key) {
                case '1':
                    if (key == this.activeIndex) {
                        break;
                    }
                    this.$router.push({ name: "home" });
                    break;
                case '2':
                    if (key == this.activeIndex) {
                        break;
                    }
                    this.$router.push({ name: "house" });
                    break;
                case '3':
                    if (key == this.activeIndex) {
                        break;
                    }
                    this.$router.push({ name: "message" });
                    break;
                case '4':
                    if (key == this.activeIndex) {
                        break;
                    }
                    this.$router.push({ name: "center" });
                    break;
            }
        },
    }
}
</script>

<style scoped>
.el-menu--horizontal>.el-menu-item.is-active,
.el-menu--horizontal>.el-menu-item {
    border-bottom: none;
}

.el-menu-item.is-active {
    background-color: rgb(150, 5, 5) !important;
}
</style>